<script>

import * as echarts from 'echarts';
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

export default {
  name: 'VisEight',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods:{open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    getData(){
      this.$axios.get('/api/data26', {

      }).then(res =>{

        if (res.data.code === 200) {
          let data = [];
          for (let i = 0; i < res.data.result.length; i++) {
            data.push(
                {
                  name: res.data.result[i].jerseyNo,
                  value: res.data.result[i].count,
                },
            )
          }
          this.init(data);
        }

      }).catch(error =>{
        error = "系统出错了"
        this.open4(error)
      })
    },
    init(data) {

      var chartDom = document.getElementById("main-vis-8");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        backgroundColor:"#fffdfd",
        title: {
          text: '退役球员热门球号Top20',
        },
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 12
          }
        },
        series: [{
          type: "wordCloud",
          // 网格大小，各项之间间距 网格尺寸越大，单词之间的间距越大
          gridSize: 0,
          // 形状有(circle)圆形(默认)、(cardioid)心形，(diamond)菱形，
          // (triangle-forward)三角形向前，(triangle)三角形，(pentagon)五边形和(star)星形。*/
          shape: 'star',
          // 字体大小范围
          sizeRange: [16, 40],
          // 文字旋转角度范围
          rotationRange: [-60, 60],
          rotationStep: 5,
          // 自定义图形
          // maskImage: maskImage,
          //设置显示区域的位置以及大小
          left: 'center',
          top: 'center',
          right: null,
          bottom: null,
          width: '70%',
          height: '80%',
          // 是否渲染超出画布的文字
          drawOutOfBound: false,
          //如果字体太大而无法显示文本，
          //是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小。
          shrinkToFit: false,
          textStyle: {
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')'
            },
          },
          emphasis: {
            textStyle: {
              fontWeight: 'bold',
              color: '#53F6FF',
            }
          },
          data: data
        }]
      };


      option && myChart.setOption(option);
    }
  }
}

</script>

<template>
  <div id="main-vis-8"></div>
</template>

<style scoped>
#main-vis-8 {
  height: 100%;
  width: 100%;
}
</style>